<template>
  <div class="post_panel" v-loading="loading">
    <!-- 显示回复 @user -->
    <!-- 贴文评论区域  -->
    <div class="comments_to">
      <span>{{ $t('postlist.reply') }}</span
      ><router-link :to="'/Person/' + postForm.reply_user_id"
        >@{{ postForm.reply_user_account }}</router-link
      >
    </div>
    <!-- 头像与输入框 -->
    <div class="p_content">
      <div class="p_header">
        <img :src="userHeaderImg" alt="" />
      </div>
      <div class="p_input">
        <el-input
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 5 }"
          :placeholder="$t('userpost.placeholder')"
          v-model="postForm.post_content"
          :maxlength="auth_input_limit"
          resize="none"
          show-word-limit
        >
        </el-input>
      </div>
    </div>
    <!-- 上传后的图片所在位置 -->
    <div class="upload_img_panel">
      <!-- 显示一张图片 -->
      <div v-if="uploadImgList.length == 1">
        <div
          class="up_img_item_single"
          v-for="(item, index) in uploadImgList"
          :key="index"
        >
          <img :src="item.imgsrc" class="imgpic" alt="" />
          <div class="del_img_btn" @click="delImg(index)">
            <div class="del_btn_panel">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <g>
                  <path
                    d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"
                  ></path>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <!-- 显示多张图片 -->
      <div class="mulit-list-pic" v-else>
        <div
          class="up_img_item"
          v-for="(item, index) in uploadImgList"
          :key="index"
        >
          <img :src="item.imgsrc" class="imgpic" alt="" />
          <div class="del_img_btn" @click="delImg(index)">
            <div class="del_btn_panel">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <g>
                  <path
                    d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"
                  ></path>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 上传短视频所在位置 -->

    <!-- 设置回复权限 -->

    <!-- 分界线 -->
    <div class="p_line"></div>
    <!-- 工具栏 -->
    <div class="p_tools">
      <div class="input_tools">
        <!-- 表情包弹出 -->
        <el-popover
          placement="bottom"
          trigger="click"
          v-model="showEmotVisible"
          class="el-popove-emo"
        >
          <!-- 弹出表情包 -->
          <div class="emot_panel">
            <div class="it" v-for="(item, index) in emot_list" :key="index">
              <img
                @click="select_emot(item.id)"
                :src="item.src"
                :alt="item.id"
              />
            </div>
          </div>
          <!-- 输入菜单工具item-表情包 -->
          <div class="item" slot="reference">
            <div>
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <g>
                  <path
                    d="M8 9.5C8 8.119 8.672 7 9.5 7S11 8.119 11 9.5 10.328 12 9.5 12 8 10.881 8 9.5zm6.5 2.5c.828 0 1.5-1.119 1.5-2.5S15.328 7 14.5 7 13 8.119 13 9.5s.672 2.5 1.5 2.5zM12 16c-2.224 0-3.021-2.227-3.051-2.316l-1.897.633c.05.15 1.271 3.684 4.949 3.684s4.898-3.533 4.949-3.684l-1.896-.638c-.033.095-.83 2.322-3.053 2.322zm10.25-4.001c0 5.652-4.598 10.25-10.25 10.25S1.75 17.652 1.75 12 6.348 1.75 12 1.75 22.25 6.348 22.25 12zm-2 0c0-4.549-3.701-8.25-8.25-8.25S3.75 7.451 3.75 12s3.701 8.25 8.25 8.25 8.25-3.701 8.25-8.25z"
                  ></path>
                </g>
              </svg>
            </div>
            <div class="svg_txt">{{ $t("userpost.emot") }}</div>
          </div>
        </el-popover>
        <!-- 输入菜单工具item-图片上传 -->
        <input
          id="uploadimg"
          type="file"
          ref="postuploader"
          accept=".jpg, .jpeg, .bmp, .gif, .png, .heif, .heic, video/mp4,video/x-m4v,video/*,.mkv,.flv"
          multiple="multiple"
          class="upload_hidden"
          @change="addUploadImg"
          :disabled="isAddImgEnable"
        />
        <!-- 上传输入框放在外面，否则会被执行两次 -->
        <div
          :class="isAddImgEnable ? 'item disable' : 'item'"
          @click="addPreviewImg()"
          :disable="isAddImgEnable"
        >
          <div>
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <g>
                <path
                  d="M3 5.5C3 4.119 4.119 3 5.5 3h13C19.881 3 21 4.119 21 5.5v13c0 1.381-1.119 2.5-2.5 2.5h-13C4.119 21 3 19.881 3 18.5v-13zM5.5 5c-.276 0-.5.224-.5.5v9.086l3-3 3 3 5-5 3 3V5.5c0-.276-.224-.5-.5-.5h-13zM19 15.414l-3-3-5 5-3-3-3 3V18.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-3.086zM9.75 7C8.784 7 8 7.784 8 8.75s.784 1.75 1.75 1.75 1.75-.784 1.75-1.75S10.716 7 9.75 7z"
                ></path>
              </g>
            </svg>
          </div>
          <div class="svg_txt">{{ $t("userpost.picture") }}</div>
        </div>
        <!-- 输入菜单工具item 视频 -->

        <!-- 输入菜单工具item 新标题 -->
        <div class="item" @click="addTitle()">
          <div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-hash"
              viewBox="0 0 16 16"
            >
              <path
                d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"
              />
            </svg>
          </div>
          <div class="svg_txt">{{ $t("userpost.title") }}</div>
        </div>
      </div>
      <div class="tools_btn">
        <el-button type="primary" size="mini" @click="savePost" round
          >{{ $t("userpost.replyBtn") }}</el-button
        >
      </div>
    </div>
    <!-- 进度条/加载提示 -->
    <!-- <div v-if="loading" class="loading">
        <img :src="loadingImg" alt="" />
      </div> -->
  </div>
</template>
<script>
//获取统一请求接口
import { addPostHandler,getDetailsUserGlobalInfo } from "@/api";

export default {
  name: "UserReplyComponents",
  props: {
    postData: Object,
    msg: String,
  },
  data() {
    return {
      userHeaderImg: JSON.parse(localStorage.getItem("user")).user_headimg
        ? JSON.parse(localStorage.getItem("user")).user_headimg
        : require("@/assets/img/user.png"),
      uploadImgList: [],
      uploadVideoList: [],
      isAddImgEnable: false, //图片上传是否可用
      isAddVideoEnable: false, //视频上传是否可用
      postMessage: "",
      msgMax: 300,
      showEmotVisible: false,
      showAddImgVisible: false,
      auth_input_limit:JSON.parse(localStorage.getItem("user")).auth_input_limit?JSON.parse(localStorage.getItem("user")).auth_input_limit:300,
      emot_num: 84,
      emot_list: [],
      emot_title: "心相印",
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", //上传图片
      pophoverIsVisable: false,
      selectedSvgIcon:
        '<svg viewBox="0 0 24 24" aria-hidden="true" ><g><path d="M12 1.75C6.34 1.75 1.75 6.34 1.75 12S6.34 22.25 12 22.25 22.25 17.66 22.25 12 17.66 1.75 12 1.75zm-.25 10.48L10.5 17.5l-2-1.5v-3.5L7.5 9 5.03 7.59c1.42-2.24 3.89-3.75 6.72-3.84L11 6l-2 .5L8.5 9l5 1.5-1.75 1.73zM17 14v-3l-1.5-3 2.88-1.23c1.17 1.42 1.87 3.24 1.87 5.23 0 1.3-.3 2.52-.83 3.61L17 14z"></path></g></svg>',
      selectedReplyText: "所有人可以回复",
      replyList: [
        {
          id: 1,
          svgicon:
            '<svg viewBox="0 0 24 24" aria-hidden="true"><g><path d="M4.65 8.24c-.57 1.13-.9 2.41-.9 3.76 0 4.56 3.69 8.25 8.25 8.25 2.87 0 5.4-1.47 6.88-3.69l-2.99-1.5.56-3.32-3.01-4.21 4.16-1.59c-1.27-1.17-2.91-1.95-4.72-2.14l-.5 2.38-2.08 1.04-.53 1.41 4.82 1.93-2.16 2.87-1.23 5.54-3.7-1.85V13.1l-.53-2.68.26-.71-2.58-1.47zm1.13-1.66l2.16 1.23.77-2.03 1.91-.96.21-.99c-2.01.29-3.78 1.3-5.05 2.75zm3.26 4l.46 2.32v2.98l.3.15.77-3.46.85-1.13-2.35-.94-.03.08zm9.92-3.02l-2.39.91 1.99 2.79-.45 2.68 1.67.83c.3-.87.47-1.8.47-2.77 0-1.63-.47-3.16-1.29-4.44zM1.75 12C1.75 6.34 6.34 1.75 12 1.75S22.25 6.34 22.25 12 17.66 22.25 12 22.25 1.75 17.66 1.75 12z"></path></g></svg>',
          svgselected:
            '<svg viewBox="0 0 24 24" aria-hidden="true" ><g><path d="M12 1.75C6.34 1.75 1.75 6.34 1.75 12S6.34 22.25 12 22.25 22.25 17.66 22.25 12 17.66 1.75 12 1.75zm-.25 10.48L10.5 17.5l-2-1.5v-3.5L7.5 9 5.03 7.59c1.42-2.24 3.89-3.75 6.72-3.84L11 6l-2 .5L8.5 9l5 1.5-1.75 1.73zM17 14v-3l-1.5-3 2.88-1.23c1.17 1.42 1.87 3.24 1.87 5.23 0 1.3-.3 2.52-.83 3.61L17 14z"></path></g></svg>',
          txt: "所有人",
          selected: true,
        },
        {
          id: 2,
          svgicon:
            '<svg viewBox="0 0 24 24" aria-hidden="true"><g><path d="M10 4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zM6 6c0-2.21 1.791-4 4-4s4 1.79 4 4-1.791 4-4 4-4-1.79-4-4zM3.651 19h12.698c-.337-1.8-1.023-3.21-1.945-4.19C13.318 13.65 11.838 13 10 13s-3.317.65-4.404 1.81c-.922.98-1.608 2.39-1.945 4.19zm.486-5.56C5.627 11.85 7.648 11 10 11s4.373.85 5.863 2.44c1.477 1.58 2.366 3.8 2.632 6.46l.11 1.1H1.395l.11-1.1c.266-2.66 1.155-4.88 2.632-6.46zm19.75-7.22l-4.141 6.21L16.1 9.7l1.2-1.6 1.954 1.47 2.969-4.46 1.664 1.11z"></path></g></svg>',
          svgselected:
            '<svg viewBox="0 0 24 24" aria-hidden="true" ><g><path d="M14 6c0 2.21-1.791 4-4 4S6 8.21 6 6s1.791-4 4-4 4 1.79 4 4zm-4 5c-2.352 0-4.373.85-5.863 2.44-1.477 1.58-2.366 3.8-2.632 6.46l-.11 1.1h17.21l-.11-1.1c-.266-2.66-1.155-4.88-2.632-6.46C14.373 11.85 12.352 11 10 11zm12.223-5.89l-2.969 4.46L17.3 8.1l-1.2 1.6 3.646 2.73 4.141-6.21-1.664-1.11z"></path></g></svg>',
          txt: "你关注的账号",
          selected: false,
        },
        {
          id: 3,
          svgicon:
            '<svg viewBox="0 0 24 24" aria-hidden="true"><g><path  d="M8.52 3.59c.8-1.1 2.04-1.84 3.48-1.84s2.68.74 3.49 1.84c1.34-.21 2.74.14 3.76 1.16s1.37 2.42 1.16 3.77c1.1.8 1.84 2.04 1.84 3.48s-.74 2.68-1.84 3.48c.21 1.34-.14 2.75-1.16 3.77s-2.42 1.37-3.76 1.16c-.8 1.1-2.05 1.84-3.49 1.84s-2.68-.74-3.48-1.84c-1.34.21-2.75-.14-3.77-1.16-1.01-1.02-1.37-2.42-1.16-3.77-1.09-.8-1.84-2.04-1.84-3.48s.75-2.68 1.84-3.48c-.21-1.35.14-2.75 1.16-3.77s2.43-1.37 3.77-1.16zm3.48.16c-.85 0-1.66.53-2.12 1.43l-.38.77-.82-.27c-.96-.32-1.91-.12-2.51.49-.6.6-.8 1.54-.49 2.51l.27.81-.77.39c-.9.46-1.43 1.27-1.43 2.12s.53 1.66 1.43 2.12l.77.39-.27.81c-.31.97-.11 1.91.49 2.51.6.61 1.55.81 2.51.49l.82-.27.38.77c.46.9 1.27 1.43 2.12 1.43s1.66-.53 2.12-1.43l.39-.77.82.27c.96.32 1.9.12 2.51-.49.6-.6.8-1.55.48-2.51l-.26-.81.76-.39c.91-.46 1.43-1.27 1.43-2.12s-.52-1.66-1.43-2.12l-.77-.39.27-.81c.32-.97.12-1.91-.48-2.51-.61-.61-1.55-.81-2.51-.49l-.82.27-.39-.77c-.46-.9-1.27-1.43-2.12-1.43zm4.74 5.68l-6.2 6.77-3.74-3.74 1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36z"></path></g></svg>',
          svgselected:
            '<svg data-v-54c1ae8e="" viewBox="0 0 22 22" aria-label="认证账号" role="img" data-testid="icon-verified" ><g data-v-54c1ae8e=""><path data-v-54c1ae8e="" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path></g></svg>',
          txt: "认证账号",
          selected: false,
        },
        {
          id: 4,
          svgicon:
            '<svg viewBox="0 0 512 512"><path d="M432 448a15.92 15.92 0 01-11.31-4.69l-352-352a16 16 0 0122.62-22.62l352 352A16 16 0 01432 448zM255.66 384c-41.49 0-81.5-12.28-118.92-36.5-34.07-22-64.74-53.51-88.7-91v-.08c19.94-28.57 41.78-52.73 65.24-72.21a2 2 0 00.14-2.94L93.5 161.38a2 2 0 00-2.71-.12c-24.92 21-48.05 46.76-69.08 76.92a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416a239.13 239.13 0 0075.8-12.58 2 2 0 00.77-3.31l-21.58-21.58a4 4 0 00-3.83-1 204.8 204.8 0 01-51.16 6.47zM490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96a227.34 227.34 0 00-74.89 12.83 2 2 0 00-.75 3.31l21.55 21.55a4 4 0 003.88 1 192.82 192.82 0 0150.21-6.69c40.69 0 80.58 12.43 118.55 37 34.71 22.4 65.74 53.88 89.76 91a.13.13 0 010 .16 310.72 310.72 0 01-64.12 72.73 2 2 0 00-.15 2.95l19.9 19.89a2 2 0 002.7.13 343.49 343.49 0 0068.64-78.48 32.2 32.2 0 00-.1-34.78z"/><path  d="M256 160a95.88 95.88 0 00-21.37 2.4 2 2 0 00-1 3.38l112.59 112.56a2 2 0 003.38-1A96 96 0 00256 160zM165.78 233.66a2 2 0 00-3.38 1 96 96 0 00115 115 2 2 0 001-3.38z"/></svg>',
          svgselected:
            '<svg viewBox="0 0 512 512"><path d="M432 448a15.92 15.92 0 01-11.31-4.69l-352-352a16 16 0 0122.62-22.62l352 352A16 16 0 01432 448zM255.66 384c-41.49 0-81.5-12.28-118.92-36.5-34.07-22-64.74-53.51-88.7-91v-.08c19.94-28.57 41.78-52.73 65.24-72.21a2 2 0 00.14-2.94L93.5 161.38a2 2 0 00-2.71-.12c-24.92 21-48.05 46.76-69.08 76.92a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416a239.13 239.13 0 0075.8-12.58 2 2 0 00.77-3.31l-21.58-21.58a4 4 0 00-3.83-1 204.8 204.8 0 01-51.16 6.47zM490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96a227.34 227.34 0 00-74.89 12.83 2 2 0 00-.75 3.31l21.55 21.55a4 4 0 003.88 1 192.82 192.82 0 0150.21-6.69c40.69 0 80.58 12.43 118.55 37 34.71 22.4 65.74 53.88 89.76 91a.13.13 0 010 .16 310.72 310.72 0 01-64.12 72.73 2 2 0 00-.15 2.95l19.9 19.89a2 2 0 002.7.13 343.49 343.49 0 0068.64-78.48 32.2 32.2 0 00-.1-34.78z"/><path  d="M256 160a95.88 95.88 0 00-21.37 2.4 2 2 0 00-1 3.38l112.59 112.56a2 2 0 003.38-1A96 96 0 00256 160zM165.78 233.66a2 2 0 00-3.38 1 96 96 0 00115 115 2 2 0 001-3.38z"/></svg>',
          txt: "禁止所有人",
          selected: false,
        },
      ],
      postForm: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        post_content: "",
        sp_url: "",
        tp_url: "",
        post_replylimit: 1,
        post_ip: localStorage.getItem("ip"),
        post_lan_ip: "",
        post_location: "",
        post_city: "",
        post_country: "",
        post_regionName: "",
        post_lat: "",
        post_lon: "",
        zf_parent_id: 0,
        pl_parent_id: this.postData.post_id ? this.postData.post_id : 1,
        zf_user_id:0,
        reply_user_id: this.postData.user_id ? this.postData.user_id : "",
        reply_user_account: this.postData.username
          ? this.postData.username
          : "",
      },
      loading: false,
    };
  },
  mounted() {
    //初始化表情包
    this.init_emot();
  },
  methods: {
    savePost() {
      this.addPosthandler();
    },
    //初始化表情包
    init_emot() {
      //初始化方法
      var _this = this;
      //默认生成表情列表
      for (let i = 1; i <= _this.emot_num; i++) {
        var emot = new Object();
        emot.id = i;
        emot.src = require("@/assets/img/emot/2023_" + i + ".png");
        _this.emot_list.push(emot);
      }
    },
    showEmot() {
      this.showEmotVisible = !this.showEmotVisible;
    },
    //选中表情操作
    select_emot(e) {
      //根据点击表情id生成快捷文字
      var el = e;
      var em_text = "[2023_" + el + "]";
      //关闭表情选择器并将内容赋值到input表签内
      this.showEmotVisible = false;
      //console.log("test:"+em_text)
      //console.log(this.replace_em(testdata))
      this.postForm.post_content += em_text;
    },

    addTitle() {
      this.postForm.post_content = "#新话题# " + this.postForm.post_content;
    },
    delImg(idx) {
      this.uploadImgList.forEach((item, index) => {
        if (index == idx) {
          this.uploadImgList.splice(idx, 1);
        }
      });
      this.setImgEnable();
    },
    //点击触发上传按钮
    addPreviewImg() {
      let _this = this;
      let input = _this.$refs.postuploader; // document.getElementById("uploadimg");
      input.click(); //模拟点击
    },
    //封装图片文件方法
    addUploadImg() {
      let _this = this;
      let input = _this.$refs.postuploader; // document.getElementById("uploadimg");
      let reader = new FileReader();
      let file = input.files[0];
      const limitSize = file.size / 1024 / 1024 < 2;
      if (!limitSize) {
        this.$message({
          message: "上传文件限制最大为2MB",
          type: "warning",
        });
        return;
      }
      reader.readAsDataURL(file);
      reader.onload = function () {
        let imgsrc = reader.result; //this.result
        _this.uploadImgList.push({ imgsrc: imgsrc, file: file });
        //图片超过4张禁止继续上传
        _this.setImgEnable();
      };
    },
    //封装判断上传图片列表长度小于4张则可以上传，否则禁用
    setImgEnable() {
      let counts = this.uploadImgList.length;
      if (counts > 0) {
        this.isAddVideoEnable = true;
      } else {
        this.isAddVideoEnable = false;
      }
      // console.log(counts);
      if (counts < 4) {
        this.isAddImgEnable = false;
      } else {
        this.isAddImgEnable = true;
      }
    },
    //上传图片和上传视频发帖方法整合
    async addUploadPostHandler() {
      //打开进度
      this.loading = true;
      //新建变量FormData
      const formData = new FormData();
      //添加信息数据
      formData.append("user_id", this.postForm.user_id);
      formData.append("zf_parent_id", this.postForm.zf_parent_id);
      formData.append("pl_parent_id", this.postForm.pl_parent_id);
      formData.append("zf_user_id", this.postForm.zf_user_id);
      formData.append("reply_user_id", this.postForm.reply_user_id);
      formData.append("reply_user_account", this.postForm.reply_user_account);
      formData.append("post_content", this.postForm.post_content);
      formData.append("post_replylimit", this.postForm.post_replylimit);
      formData.append("post_ip", this.postForm.post_ip);
      formData.append("post_lan_ip", this.postForm.post_lan_ip);
      formData.append("post_location", this.postForm.post_location);
      formData.append("post_city", this.postForm.post_city);
      formData.append("post_country", this.postForm.post_country);
      formData.append("post_regionName", this.postForm.post_regionName);
      formData.append("post_lat", this.postForm.post_lat);
      formData.append("post_lon", this.postForm.post_lon);

      //从uploadImgList拿出要上传的图片
      this.uploadImgList.forEach((item) => {
        formData.append("image", item.file);
      });
      //从uploadVideoList拿出要上传的视频
      this.uploadVideoList.forEach((item) => {
        formData.append("video", item.file);
      });

      //调用文件上传请求方法
      let res = await addPostHandler(formData);
      if (res.state == 200) {
        //显示上传文件的路径信息
        //触发父组件刷新数据
        this.$emit("savePost");
        this.$emit("reloadQuoteDataList");
        //消息提示
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message({
          message: res.message,
          type: "warning",
        });
      }
      this.loading = false;
      this.initPostForm();
    },
    //发布帖子
    async addPosthandler() {
      //发帖前判断发帖内容不能为空
      if (
        this.postForm.post_content.trim() == "" ||
        this.postForm.post_content == null
      ) {
        this.$message({
          message: "发布内容不能为空",
          type: "warning",
        });
        return;
      }
      //发布的时候再获取用户ip地址信息
      //初始化局域网IP
      this.getUserIP((ip) => {
        this.postForm.post_lan_ip = ip;
      });
      //外网IP
      await this.getLocationFromIP(this.postForm.post_ip);
      //最新整合方法
      this.addUploadPostHandler();
    },
    //重置表单
    initPostForm() {
      this.uploadImgList = [];
      this.uploadVideoList = [];
      this.postForm.post_content = "";
      this.isAddImgEnable = false;
      this.isAddVideoEnable = false;
    },
    //通过IP请求公共API获取国家/地区信息
    async getLocationFromIP(ip) {
      let res = await getDetailsUserGlobalInfo(ip);
      //console.log(res);
      if (res.status) {
        this.postForm.post_location =
          res.regionName + " " + res.city + " " + res.isp;
        this.postForm.post_city = res.city;
        this.postForm.post_regionName = res.regionName;
        this.postForm.post_country = res.country;
        this.postForm.post_lat = res.lat;
        this.postForm.post_lon = res.lon;
      }
    },
    // 获取用户IP地址
    getUserIP(onNewIP) {
      let MyPeerConnection =
        window.RTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.webkitRTCPeerConnection;
      let pc = new MyPeerConnection({
        iceServers: [],
      });
      let noop = () => {};
      let localIPs = {};
      let ipRegex =
        /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
      let iterateIP = (ip) => {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
      };
      pc.createDataChannel("");
      pc.createOffer()
        .then((sdp) => {
          sdp.sdp.split("\n").forEach(function (line) {
            if (line.indexOf("candidate") < 0) return;
            line.match(ipRegex).forEach(iterateIP);
          });
          pc.setLocalDescription(sdp, noop, noop);
        })
        .catch((reason) => {
          console.log(reason);
        });
      pc.onicecandidate = (ice) => {
        if (
          !ice ||
          !ice.candidate ||
          !ice.candidate.candidate ||
          !ice.candidate.candidate.match(ipRegex)
        )
          return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
      };
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.post_panel {
  padding: 0px 0px 10px 0px;
  /* border-bottom: 1px solid rgb(239, 243, 244); */
  /* border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(239, 243, 244); */
}

/* 回复与评论 */
.comments_to {
  display: flex;
  font-size: 14px;
  margin: 5px 0px 15px 60px;
}

.comments_to span {
  margin-right: 10px;
  line-height: 19px;
}

.comments_to a {
  color: rgb(29, 155, 240);
  line-height: 19px;
}

.p_content {
  display: flex;
  min-height: 120px;
}

.p_header {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.p_header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.p_input {
  width: 100%;
}

.post_input_box {
  width: 100%;
  height: 90px;
  resize: none;
  padding: 0;
  background: transparent;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  font-size: 15px;
}
.rp_panel {
  display: flex;
  color: rgb(29, 155, 240);
}

/* 回复权限 */
.rp_panel /deep/ .el-popover {
  border-radius: 15px;
  box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px,
    rgba(101, 119, 134, 0.15) 0px 0px 3px;
}

.select_list {
  display: flex;
  flex-direction: column;
}

.select_list .select_item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 10px 0;
}

.select_list .select_panel {
  cursor: pointer;
  display: flex;
}

.select_list .select_panel:hover {
  background-color: rgba(15, 20, 25, 0.1);
}

.select_item .icon {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(29, 155, 240);
  line-height: 50px;
  margin-right: 10px;
}

.select_item .icon .i {
  width: 40px;
  height: 40px;
}
.select_item .icon svg {
  fill: #fff;
  width: 20px;
  height: 20px;
}

.select_item .txt {
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: rgba(15, 20, 25, 1);
  line-height: 40px;
}

.select_item ::v-deep .is {
  height: 40px;
  line-height: 50px;
}

.select_item ::v-deep .i svg {
  fill: rgba(255, 255, 255, 1);
  width: 20px;
  height: 20px;
}

.select_item ::v-deep .is svg {
  fill: rgba(255, 255, 255, 0);
  width: 20px;
  height: 20px;
}

.select_item ::v-deep .selected svg {
  fill: rgb(29, 155, 240);
}

.tip_title .title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(15, 20, 25, 1);
}

.rp_hover {
  display: flex;
  padding: 5px 9px;
}

.rp_hover:hover {
  background-color: rgba(29, 155, 240, 0.1);
  border-radius: 15px;
  cursor: pointer;
}

.rp_panel .lr {
  display: flex;
}

/* 回复选中图标 */
.rp_panel ::v-deep svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  margin-right: 4px;
  fill: rgb(29, 155, 240);
}
.rp_pane span {
  display: block;
  font-size: 14px;
  line-height: 16px;
}

/* 分界线 */
.p_line {
  display: flex;
  width: 100%;
  margin: 15px 0;
  border-top: 1px solid rgb(239, 243, 244);
}

.p_tools {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.input_tools {
  display: flex;
  margin: 15px 0;
  color: rgb(29, 155, 240);
  font-size: 14px;
}

.input_tools .item {
  display: flex;
  position: relative;
  margin-right: 8px;
  cursor: pointer;
}

.input_tools .item svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: rgb(29, 155, 240);
}

.input_tools .disable {
  color: rgba(29, 155, 240, 0.4);
  cursor: not-allowed;
}

.input_tools .disable svg {
  fill: rgba(29, 155, 240, 0.4);
}

.svg_txt {
  margin: 0 6px 0 4px;
  line-height: 18px;
}

.btn_panel {
  height: 30px;
  margin: 15px 0;
}

.btn_panel button {
  border: 0;
  background: #ff8200;
  color: #fff;
}

.tools_panel {
  display: flex;
  justify-content: space-between;
}

/* 表情包样式 */

.emot_panel {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  width: 432px;
  background-color: #fff;
  /* border: 1px solid #e9e9e9; */
  /* border-radius: 10px; */
  /* box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1); */
  z-index: 99;
}

.emot_panel .it {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.333%;
  height: 38px;
  text-align: center;
}

.emot_panel .it:hover {
  cursor: pointer;
  border-radius: 50%;
  background-color: #f3e3d1;
}

.emot_panel .it img {
  width: 24px;
  height: 24px;
}

/* 图片上传 */

.upload_img_panel {
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.upload_img_panel .up_img_item {
  display: flex;
  position: relative;
  max-width: 500px;
  width: 246px;
  height: 164px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.upload_img_panel .imgpic {
  max-width: 500px;
  min-width: 246px;
  border-radius: 10px;
}

.up_img_item_single {
  position: relative;
  max-width: 500px;
}

.up_img_item_single .imgpic {
  flex: 1;
  width: 100%;
  max-height: 360px;
  border-radius: 15px;
  margin-bottom: 10px;
}

.up_img_item .del_img_btn,
.up_img_item_single .del_img_btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 39;
  cursor: pointer;
}

.mulit-list-pic {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.del_btn_panel {
  display: flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: rgba(15, 20, 25, 0.5);
  border-radius: 50%;
  line-height: 29px;
}

.del_btn_panel svg {
  width: 18px;
  height: 18px;
  fill: rgba(252, 255, 255, 1);
}

/* 默认隐藏上传输入框 */
.upload_hidden {
  display: none;
}
/* 图片样式结束 */

/* 上传视频 */
.upload_video_panel {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.up_video_item {
  display: flex;
  position: relative;
  max-width: 500px;
}

.up_video_item .del_v_btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 39;
  cursor: pointer;
}

.up_video_item .video {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  max-height: 200px;
  flex: 1;
}

.tools_btn {
  display: flex;
  align-items: center;
}

.loading {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 720px) {
  .emot_panel {
    width: 340px;
  }

  .up_video_item .video {
    flex: 1;
    width: 100%;
    max-height: 300px;
  }
}

@media screen and (max-width: 400px) {
  .emot_panel {
    width: 340px;
  }

  .up_video_item .video {
    flex: 1;
    width: 100%;
    max-height: 300px;
  }

  .up_img_item_single .imgpic {
    flex: 1;
    width: 100%;
    max-height: 300px;
  }
}
</style>
  <style>
.el-dialog__body {
  padding: 10px 20px !important;
}
</style>